<!--
@license
Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->


<dom-module id="shop-find-discount">
    <template>
        <style include="shop-common-styles">
            :host{
                padding: 10px 0px;
                display: block;
            }
            paper-icon-item{
                border-bottom: #ccc dotted 1px;
                padding: 10px;
            }
            div[slot=item-icon]{
                background-color: #ddd;
                color: #000;
                border-radius: 50%;
                width: 50px;
                height: 50px;
                display: flex;
                justify-content: center;
                align-items: center;
            }
            div[secondary]{
                font-size: 12px;
            }
        </style>
        <plugin-xhr id="xhr_discount_list" url="[[app.apiHost]]/discount.list?app_id=[[app.appId]]" response="{{discounts}}"></plugin-xhr>
        <header>
            <h1>本店促销活动</h1>
            <span>[[discounts.result.length]]个</span>
        </header>
        <paper-listbox>
            <template is="dom-repeat" items="[[discounts.result]]" as="discount">
                <paper-icon-item>
                    <div slot="item-icon">
                        [[_showRate(discount.rate)]]折
                    </div>
                    <paper-item-body two-line>
                      <div>[[discount.name]]</div>
                        <div secondary>
                            活动条件：
                            <template is="dom-if" if="[[_equal(discount.terms,'order-money')]]">
                                订单金额满[[_money(discount.quantity)]]元
                            </template>
                            <template is="dom-if" if="[[_equal(discount.terms,'product-quantity')]]">
                                商品数量满[[discount.quantity]]件
                            </template>
                            <br/>开始时间：[[_date(discount.starttime,'yyyy年MM月dd日 HH点:mm分')]] <br/>
                            结束时间：[[_date(discount.endtime,'yyyy年MM月dd日 HH点:mm分')]]
                        </div>
                    </paper-item-body>
                </paper-icon-item>
            </template>
        </paper-listbox>
    </template>

    <script>
        class ShopFindDiscount extends PluginElement {

            static get is() {
                return 'shop-find-discount';
            }

            static get properties() {
                return {
                    visible: {
                        type: Boolean,
                        observer: '_visibleChanged'
                    }
                }
            }
            ready(){
                super.ready();
                let dom = this;
                app.addEventListener("reload",function(e){
                    if(app.page=="find-discount"){
                        dom._visibleChanged(true);
                    }
                });
            }
            _visibleChanged(visible) {
                if(visible){
                    this.$.xhr_discount_list.get();
                }
            }
            _showRate(rate){
                return rate/10;
            }
        }

        customElements.define(ShopFindDiscount.is, ShopFindDiscount);

    </script>

</dom-module>
